import Vue from "vue"
import Vuex from "vuex"

Vue.use(Vuex)

// 假定我们有一个可以返回 Promise 的
// 通用 API（请忽略此 API 具体实现细节）
import { fetchItem, fetchItems, addItem } from "./api"

export function createStore() {
	return new Vuex.Store({
		state: {
			items: {}
		},
		actions: {
			// `store.dispatch()` 会返回 Promise，
			// 以便我们能够知道数据在何时更新
			fetchItem({ commit }, id) {
				return fetchItem(id).then(res => {
					commit("setItem", { id, item: res.data })
				})
			},
			fetchItems({ commit }) {
				return fetchItems().then(res => {
					commit("resetItems", res.data)
				})
			},
			addItem({ commit }, item) {
				return addItem(item).then(res => {
					commit("setItem", { id: res.data.id, item: res.data.item })
				})
			}
		},
		mutations: {
			setItem(state, { id, item }) {
				Vue.set(state.items, id, item)
			},
			resetItems(state, items) {
				state.items = items
			}
		}
	})
}
